<template>
  <div class="directory-container">
    <el-card>
      <div v-if="queryInfo.subjectID">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-input
                v-model="form.name"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="状态" size="small">
              <el-select
                v-model="form.state"
                placeholder="请选择状态"
                @change="onStateChange"
              >
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="dir-btn-box">
              <el-button size="mini" @click="clearForm">清除</el-button>
              <el-button type="primary" size="mini" @click="onStateSearch">
                搜索
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="right">
              <el-button
                v-if="queryInfo.subjectID"
                type="text"
                icon="el-icon-back"
                @click="$router.back()"
              >
                返回学科
              </el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="addDirectorys"
              >
                新增目录
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 目录table -->
      <el-table :data="directoryList" style="width: 100%" class="dir-table">
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120px">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160px">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template> </el-table-column
        ><el-table-column prop="totals" label="面试题数量" width="120px">
        </el-table-column
        ><el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.state === 0">已禁用</el-tag>
            <el-tag type="success" v-else>
              已启用
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="160px">
          <template slot-scope="scope">
            <el-button type="text" @click="onToggleClick(scope.row)">
              {{ scope.row.state === 0 ? '启用' : '禁用' }}
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="onEditClick(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="onDeleteClick(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        class="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        background
      >
      </el-pagination>

      <!-- 添加目录 -->
      <el-dialog
        v-if="addDialogVisible"
        :title="`${title}目录`"
        :visible.sync="addDialogVisible"
        width="30%"
      >
        <directorys-add @close="addSuccess" :title="title" />
      </el-dialog>

      <!-- 修改目录 -->
      <el-dialog
        v-if="editDialogVisible"
        :title="`${title}目录`"
        :visible.sync="editDialogVisible"
        width="30%"
      >
        <directorys-add
          @close="editSuccess"
          :editList="editCurrent"
          :title="title"
        />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '../../api/hmmm/directorys'

import directorysAdd from '../components/directorys-add'

export default {
  name: 'DirectoryIndex',
  components: { directorysAdd },
  data() {
    return {
      form: {
        name: ''
      },
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectID: ''
      },
      state: '',
      total: 0,
      directoryList: [], // 目录列表
      addDialogVisible: false, // 控制新增目录弹框
      editDialogVisible: false, // 控制修改目录弹框
      title: '新增',
      editCurrent: {} // 当前修改项数据
    }
  },
  created() {
    this.loadDirectoryList()

    // 通过路由跳转过来
    if (this.$route.query) {
      this.queryInfo.subjectID = this.$route.query.id
      if (this.queryInfo.subjectID) {
        this.loadDirectoryList()
      }
    }
  },
  methods: {
    async loadDirectoryList() {
      try {
        const { data: res } = await list(this.queryInfo)
        // console.log(res)
        this.total = res.counts
        this.directoryList = res.items
      } catch (error) {
        this.$message('数据加载失败')
      }
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.loadDirectoryList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.loadDirectoryList()
    },
    onStateChange(val) {
      this.state = val
    },
    clearForm() {
      this.form = this.$options.data().form
      this.loadDirectoryList()
    },
    async onStateSearch() {
      try {
        if (this.fromSubject) {
          if (this.state === '') return this.$message('请选择状态')
        }
        const { data: res } = await list({
          state: this.state,
          directoryName: this.form.name
        })
        // console.log(res)
        this.directoryList = res.items
        this.total = res.counts
      } catch (error) {
        this.$message('搜索失败')
      }
    },
    // 新增目录
    addDirectorys() {
      this.title = '新增'
      this.addDialogVisible = true
    },
    addSuccess() {
      this.addDialogVisible = false
      this.loadDirectoryList()
    },
    // 禁用/启用 按钮
    async onToggleClick(row) {
      // console.log(row)
      try {
        if (row.state !== 1) {
          row.state = 1
        } else {
          row.state = 0
        }

        await changeState(row)
        // console.log(res)
      } catch (error) {
        this.$message('更改失败')
      }
    },
    // 修改按钮
    onEditClick(row) {
      this.title = '修改'
      this.editDialogVisible = true
      // console.log(row)
      this.editCurrent = row
    },
    // 修改
    editSuccess() {
      this.editDialogVisible = false
      this.loadDirectoryList()
    },
    // 删除
    async onDeleteClick(row) {
      const resultConfirm = await this.$confirm(
        '此操作将永久删除该目录, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // console.log(resultConfirm)
      // 如果点击确认按钮  返回字符串 confirm
      // 如果点击取消按钮  返回字符串 cancel
      if (resultConfirm !== 'confirm') return this.$message.info('已取消操作')

      try {
        await remove(row)

        this.$message.success('删除成功！')
        this.loadDirectoryList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.directory-container {
  padding: 0 10px;
  margin: 10px 0;

  .dir-btn-box {
    margin-left: -70px;
  }

  .right {
    text-align: right;
  }

  .dir-table {
    margin: 15px 0;
  }

  .el-breadcrumb {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
}
</style>
